<template>
	<view class="comAll">
		<view class="comTop">
			<view class="comTopTitle">
				{{info.title}}
			</view>
			<view class="statusIcon">
				<image :src="statusIcon" mode="widthFix"></image>
			</view>
			<view class="comTopInfo">
				<view v-for="(item, index) in titleInfo" :key="index">{{item.title}}: {{info[item.code] ? info[item.code] : '--'}}</view>
			</view>
		</view>
		<view class="comBottom">
			<view class="tableTip">
				<text>
					滑动查看详情
				</text>
			</view>
			<scroll-view scroll-x="true" class="scrollPage" id="scrollView">
				<view class="scrollTitle">
					<text>
						食材提报单
					</text>
				</view>
				<view class="myTable">
					<view v-for="(listKey, key , index) in listTitle" :key="key" class="myTableBody">
						<view class="myTableTh">
							{{listKey.title}}
						</view>
						<view class="myTableTd" v-for="(item, index) in info.food" :key="index">
							{{listKey.code === 'index' ? index + 1 : item[listKey.code] !== ''? item[listKey.code]: '--'}}
							<template v-if="item[listKey.code] !== ''">
								{{listKey.code === 'price' || listKey.code === 'commission' ? '元' : listKey.code === 'commission_percentage' ? '%' : ''}}
							</template>
						</view>
						<!-- <view  class="myTableTd" v-for="(item, subIndex) in info.list" :key="subIndex">
							{{item[key]}}
						</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			info:Object,
		},
		computed:{
			titleList(){
				if(this.$store.getters.getUserInfo.category === 'buyer') {
					return this.titleInfo
				} else {
					return this.titleInfoCom
				}
			}
		},
		data(){
			return{
				statusIcon:require('../../static/report/notPass.png'),
				titleInfo:[
					{
						title:'合同编码',
						code:'secondNo'
					},
					{
						title:'买手姓名',
						code:'name'
					},
					{
						title:'买手电话',
						code:'phone'
					}
				],
				titleInfoCom:[
					{
						title:'合同编码',
						code:'secondNo'
					},
					{
						title:'供应商名称',
						code:'name'
					},
					{
						title:'供应商电话',
						code:'phone'
					}
				],
				listTitle:[   // 客户需要的条目： 序号， 提报编码 食材名称，食材产地，包装规格，采购单价，发货方式
					{
						title:'序号',
						code:'index'
					},
					{
						title: '提报编码',
						code: 'submissionNo',
					},
					// {
					// 	title:'佣金比率',
					// 	code:'commission_percentage'
					// },
					// {
					// 	title:'佣金金额',
					// 	code:'commission'
					// },
					{
						title:'食材名称',
						code:'name'
					},
					{
						title:'食材产地',
						code:'place_of_origin'
					},
					{
						title:'包装规格 ',
						code:'specification'
					},
					{
						title:'采购单价',
						code:'price'
					},
					// {
					// 	title:'采购单位',
					// 	code:'units'
					// },
					// {
					// 	title:'商品外包装',
					// 	code:'inside_packing'
					// },
					// {
					// 	title:'商品内包装',
					// 	code:'external_packing'
					// },
					// {
					// 	title:'月供应量',
					// 	code:'supply'
					// },
					// {
					// 	title:'供应周期',
					// 	code:'cycle'
					// },
					// {
					// 	title:'保质期',
					// 	code:'shelf_life'
					// },
					// {
					// 	title:'存储方式',
					// 	code:'environment'
					// },
					{
						title:'发货方式',
						code:'distribution_type'
					},
					// {
					// 	title:'发货时效',
					// 	code:'delivery_time'
					// },
					// {
					// 	title:'备注',
					// 	code:'remark'
					// }
				]
			}
		},
		methods:{
			
		},
		onLoad() {
		}
	}
</script>

<style scoped>
	.comAll{
		background-color: #FFF;
		box-shadow: 0 0 30upx -15upx #f03d3d;
		padding: 26.66upx 0;
		height:100%;
		border-radius: 10upx;
		margin: 17upx 0 0 0;
	}
	.comTop{
		position: relative;
		display: flex;
		flex-wrap: wrap;
	}
	.comTopTitle{
		text-align: center;
		font-size: 36upx;
		color:#333333;
		font-weight: bold;
		width: 100%;
	}
	.statusIcon{
		position: absolute;
		right:0;
		top:80upx;
		transform: rotate(25deg);
	}
	.statusIcon image{
		width:190upx;
	}
	.comTopInfo{
		border-radius: 15upx;
		background-color: #eeeeee;
		margin: 30upx auto 0 auto;
		padding: 8upx 25upx;
	}
	.comTopInfo view{
		font-size: 26.66upx;
		color:#333333;
		padding: 5upx 10upx;
	}
	
	.scrollPage {
		/* border-bottom: 1px solid #ffc8c7; */
		margin-top: 40upx;
		margin-bottom: 80upx;
	}
	
	.scrollTitle {
		font-size: 24upx;
		color: #333333;
		font-weight: bold;
		padding-left: 13.33upx;
	}
	
	.tableTip{
		position: absolute;
		right:25upx;
		font-size: 24upx;
		color: #e87575;
	}
	
	.myTable {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.myTableBody {
		font-size: 24upx;
		color: #6d6d6d;
	}
	
	.myTableTh {
		font-size: 26.66upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		border-top: 1px solid #ffc8c7;
		padding: 3upx 20upx;
	}
	
	.myTableTd {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		border-top: 1px solid #ffc8c7;
		padding: 3upx 20upx;
	}
	.myTableTd:last-child{
		border-bottom: 1px solid #ffc8c7;
	}
</style>
